<%-- 
    Document   : puntos
    Created on : 26-abr-2013, 23:44:43
    Author     : ReN Fractal
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Mapa Varios Puntos Google Maps API V3</title>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD-QpqLW0ewmEar3SpZRaMYCiQjt0Br_8Y&sensor=true"></script> 
        <script type="text/javascript">

            function ini(){
                var opcionesMAPA = {
                    zoom: 13,
                    center: new google.maps.LatLng(19.428988441599982,-99.1997474975586), 
                    mapTypeId: google.maps.MapTypeId.ROADMAP 
                }
                var MAPA = new google.maps.Map(document.getElementById("map_canvas"),opcionesMAPA); 
                var marcadores = [
                    ["Punto0",19.427015441594982,-99.1677474975586],
                    ["Punto1",19.428988441599982,-99.1697474975586],
                    ["Punto2",19.428988441599982,-99.1997474975586]
                ];
                for ( var index = 0 ; index < 3; index++){
                    var punto = new google.maps.LatLng(marcadores[index][1], marcadores[index][2]);
                    var marcador = new google.maps.Marker({ position: punto, title: marcadores[index][0] });
                    marcador.setMap(MAPA);
                }
            }
        </script>
    </head>
    <body onload="ini();">
        <section style="text-align:center;">
            <header><h1> MAPA CON VARIOS PUNTOS </h1><header>
                    <div id="map_canvas" style="width: 600px; height: 480px; border: 5px solid #000; margin: 0 auto;"></div>
                    </section>              
                    </body>
                    </html>
